<template>
    <div class="exam-paper-info">
        <!-- 试卷 -->
        <el-steps :active="active" finish-status="success" align-center>
            <el-step title="考试基础信息"></el-step>
            <el-step title="添加考生"></el-step>
        </el-steps>
        <!-- 步骤内容 -->
        <div class="steps-content">
            <exam-base-info :oldInfo="baseInfo" v-show="active == 0" ref="baseInfo"></exam-base-info>
            <add-examinee v-show="active == 1" :examId="oldInfo.id" ref="examineeList"></add-examinee>
        </div>
        <el-row class="verifyidentity-button">
            <el-button v-show="active > 0" type="primary" @click="prevStep" round>上一步</el-button>
            <el-button @click.stop="closeFun" round>取消</el-button>
            <el-button type="primary" @click="nextStep" round>{{ nextStepName }}</el-button>
        </el-row>
    </div>
</template>
<script>
import { saveOrUpdateExam } from '@/api/exam'
import ExamBaseInfo from './ExamBaseInfo'
import AddExaminee from './AddExaminee'

export default {
    name: 'ExamPaperInfo',
    props: {
        closeFun: {
            type: Function,
            required: true
        },
        oldInfo: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    components: {
        ExamBaseInfo,
        AddExaminee
    },
    data() {
        return {
            active: 0, // 当前所在步骤
            baseInfo: {}, // 基础信息数据
            examineeList: [], // 选择的考生数据
            nextStepName: '下一步'
        }
    },
    created() {
        if(this.oldInfo && this.oldInfo.id) {
            this.baseInfo = {
                id: this.oldInfo.createAccount == '' ? 0 : (this.oldInfo.id || 0),
                name: this.oldInfo.name,
                paperId: this.oldInfo.paperId, // 试卷id
                timeLimit: this.oldInfo.timeLimit, // 答题限时
                beginTime: this.oldInfo.beginTime, // 考试有效期开始时间
                endTime: this.oldInfo.endTime, // 考试有效期结束时间
                remark: this.oldInfo.remark
            }
        }
    },
    methods: {
        // 上一步
        prevStep() { 
            this.active -= 1
            this.nextStepName = '下一步'
        },
        // 下一步
        nextStep() {
            let that = this
            let MapList = {
                0: 'baseInfo',
                1: 'examineeList'
            }
            let flag = that.$refs[MapList[that.active]].getData() // 获取当前步骤的数据
            // 先判断当前步骤是否完成
            if(flag) {
                that[MapList[that.active]] = flag
                if(that.active == 0) {
                    // 如果当前是第一步，赋值基本信息数据
                    that.nextStepName = '完成'
                    that.active += 1
                } else {
                    // 如果是第二步
                    that.$confirm("确定完成？", '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        roundButton: true
                    }).then(() => {
                        let parames = {
                            id: that.oldInfo.createAccount == '' ? 0 : (that.oldInfo.id || 0),
                            updateAccount: that.$store.state.userinfo.accountName,
                            createAccount: that.oldInfo.createAccount || that.$store.state.userinfo.accountName,
                            examAccount: that.examineeList.join(',')
                        }
                        $.extend(parames, that.baseInfo)
                        // 保存
                        saveOrUpdateExam(parames).then(res => {
                            if(res.status === 200) {
                                that.$message.success('保存成功')
                                setTimeout(function(){
                                    that.closeFun(true)
                                }, 1000)
                            }
                        })
                    }).catch(() => {

                    })
                }
            }
        }
    }
}
</script>
<style lang="scss">
.exam-paper-info {
    .steps-content {
        padding-top: 20px;
    }
}
</style>
